<template>
	<view class="cart-container" v-if="cart.length !== 0">
		<!-- 自定义组件 收货地址 -->
		<view class="">
			<my-address></my-address>
		</view>
		
		<!-- 购物车页面标题区域 -->
		<view class="cart-title-container">
			<uni-icons type="shop" size="20"></uni-icons>
			<text class="cart-title-text">购物车</text>
		</view>
		
		
		<!-- 商品列表区域 -->
		<uni-swipe-action>
			<block v-for="(item,index) in cart" :key="index">
				 <!-- uni-swipe-action-item 可以为其子节点提供滑动操作的效果。需要通过 options 属性来指定操作按钮的配置信息 -->
				<uni-swipe-action-item :right-options="options" @click="deleteitem(item)">
					<my-goodlist :item="item" :showRadio="true" :shownumberbox="true" @radio-change="changeradio" @num-change="numberchange"></my-goodlist>
				</uni-swipe-action-item>
			</block>
		</uni-swipe-action>
		
		<!-- 自定义组件 结算区域 -->
		<view class="cart-settle-container">
			<my-settle></my-settle>
		</view>
		
	</view>
	
	<!-- 购物车空白时的展示 -->
	<view class="blank-container" v-else>
		<image class="blank-img" src="../../static/esc.png" mode=""></image>
		<text class="blank-text">空空如也~</text>
	</view>
	
</template>

<script>
	import badgemix from '../../mixins/tabbar-badge.js'
	import { mapState,mapMutations } from 'vuex'
	export default {
		data() {
			return {
				options:[{
					text:'删除',
					style:{
						 backgroundColor: '#C00000' // 按钮的背景颜色
					}
				}]
			};
		},
		mixins:[badgemix],
		computed:{
			...mapState('m_cart',['cart'])
			
		},
		methods:{
			...mapMutations('m_cart',['updategoodsstate','updateGoodsCount','deleteGoodsItem']),
			
			changeradio(e){
				// console.log('e:',e);
				this.updategoodsstate(e)
			},
			numberchange(e){
				// console.log('e:',e);
				this.updateGoodsCount(e)
			},
			deleteitem(item){
				// console.log(item);
				this.deleteGoodsItem(item.goods_id)
			}
		}
	}
</script>

<style lang="scss">
	.cart-container{
		padding-bottom: 50px;
		
		.cart-title-container{
			height: 40px;
			border-bottom: 1px solid #efefef;
			display: flex;
			align-items: center;
			padding-left:5px;
			.cart-title-text{
				margin-left: 10px;
				font-size: 14px
			}
		}
	}
	
	.blank-container{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 150px;
		.blank-img{
			width: 50px;
			height: 50px;
		}
		.blank-text{
			font-size: 15px;
			color: gray;
		}
	}
	
	
</style>
